<template>
  <div :class="styles.cart">
    <div :class="styles.label">{{cardData.label}}</div>
    <div :class="styles.cartContent">
      <div v-for="(card,index) in cardData.data"
           :style="getOneTextStyle"
           :class="styles.link">
        <a
          @click="clickUrl(card.url,index)"
           :style="showBackground&&index===selectIndex?getSelectedBackground:''">{{card.label}}</a>
      </div>
    </div>
  </div>
</template>

<script>
  import styles from './card.scss'

  export default {
    name: "card",
    model: {},
    props: {
      cardData: {
        type: Object,
      },
      textWidth: {
        type: Number,
        default: 70
      },
      paddingWidth: {
        type: Number,
        default: 15
      },
      aLineShowCount: {
        type: Number,
        default: 2
      },
      showBackground: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        styles,
        selectIndex: -1
      }
    },
    computed: {
      getOneTextStyle: function () {
        return {width: this.textWidth + 'px', ['padding-left']: this.paddingWidth + 'px'}
      },
      getCardWidth: function () {
        return {width: (this.textWidth + this.paddingWidth) * this.aLineShowCount + 'px'}
      },
      getSelectedBackground: function () {
        return {backgroundColor: 'red', color: 'white'}
      }
    },
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      clickUrl(url, index) {
        this.selectIndex = index
        this.$emit('clickUrl', url)
      }
    }
  }
</script>

<style scoped>

</style>
